<template>
	<div>
		<div class="head-top">
			<mt-header title="共享资源">
				<router-link to="/myself" slot="left">
					<mt-button icon="back"></mt-button>
				</router-link>
			</mt-header>
		</div>

		<div class="main">
			<mt-navbar class="home-nav" v-model='active'>
				<mt-tab-item class='nav-title' id='books'>图书</mt-tab-item>
				<mt-tab-item class='nav-title' id='video'>视听</mt-tab-item>
			</mt-navbar>

			<mt-tab-container v-model="active" swipeable>
				<!-- 图书分类 -->
				<mt-tab-container-item id="books">

					<div class="cells" v-for="(item,index) in bookslist" :key="index" @click='booksData(item.id)'>
						<div class="left">
							<img slot="icon" src="../../../../static/myself/Resources/Resources01.png" width="50" height="50" />
						</div>

						<a class="center">
							<span class="subtitle" v-text="item.bookName"></span>
							<a class="colo" v-for="(key,index) in item.resourcePaths" :key="index" :href="key.filePath">在线打开第{{index + 1}}条</a>
						</a>

						<div class="right">
							<span v-text="item.createTime"></span><br />
							<!--<span>邮件转发</span>-->
						</div>
					</div>

				</mt-tab-container-item>

				<mt-tab-container-item id="video">
					<!--视听分类-->
					<a class="cells" v-for="(item,index) in videolist" :key="index" @click='videolist(item.id)' :href="item.previewUrl">

						<div class="left">
							<img slot="icon" src="../../../../static/myself/Resources/Resources01.png" width="50" height="50" />
						</div>

						<a class="center">
							<span class="subtitle" v-text="item.videoName"></span>
							<span class="colo" v-text="item.createTime">2018</span>
						</a>

						<!--<div class="right">
							<span v-text="item.createTime">1小时前</span><br />
							<span>邮件转发</span>
						</div>-->
					</a>

				</mt-tab-container-item>
			</mt-tab-container>

		</div>
	</div>
</template>

<script>
	import api from './../../../api/api.js'

	export default {
		name: 'respurce',
		data() {
			return {
				active: 'books',
				datevalue: '',
				bookslist: [],
				videolist: [],
			}

		},
		created() {
			this.datevalue = this.formatDate(new Date().getTime());
			this.getBooks();
			this.getVideo();

		},
		methods: {
			booksData() {
				
			},
			getBooks() {
				this.$http({
						method: 'post',
						url: api.baseURL + 'getOrgResByOrgIdAndResType',
						params: {
							inParam: {
								callTime: this.datevalue,
								sysCode: "FH_PUBOPE",
								orgId: 4,
								resType: 1,
								currentPage: 1,
								pageSize: 10,
							}

						}
					})
					.then(response => {
						console.log(response.data.data)
						this.bookslist = response.data.data;
					})
					.catch(error => {
						console.log(error);
					});
			},
			getVideo() {
				this.$http({
						method: 'post',
						url: api.baseURL + 'getOrgResByOrgIdAndResType',
						params: {
							inParam: {
								callTime: this.datevalue,
								sysCode: "FH_PUBOPE",
								orgId: 4,
								resType: 3,
								currentPage: 1,
								pageSize: 10,
							}
						}
					})
					.then(response => {
						console.log(response.data.data)
						this.videolist = response.data.data;
					})
					.catch(error => {
						console.log(error);
						alert(error)

					});
			}
		}

	}
</script>

<style scoped>
	.main {
		margin-top: 16px;
	}
	
	.main .cells {
		display: block;
		width: 100%;
		margin-top: 2px;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
	}
	
	.main .center {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		margin-left: 10px;
		/*margin-top: 10px;*/
	}
	
	.main .left {
		margin-left: 10px;
	}
	
	.main .center .subtitle {
		font-size: 16px;
	}
	
	.main .cells .colo {
		color: #8d8d8d;
		font-size: 14px;
	}
	
	.main .cells .right {
		margin-left: 30px;	
		color: #8d8d8d;
	}
	
	.right span {
		font-size: 14px;
		
	}
</style>